<div id="mobile_nav" style="--bg: {{data.nav_bg}};--color: {{data.menu_color}};">
  <div class="mobile_nav_content">
    <div class="close_box">
      <div class="mobile_nav_logo">
        {% if data.wap_logo_pic.src != '' %}
          {% include 'lazy_img' , src: data.wap_logo_pic.src , alt: data.wap_logo_pic.alt %}
        {% else %}
          {{ storeConfig.name }}
        {% endif %}
      </div>
      <span class="inline-flex items-center cursor-pointer"></span>
    </div>
    <div class="mobile_menu">
      <ul>
        {% if data.nav.id != "" %}

          {% for item in header_nav.nav_item %}
            <li>
              <div class="mobile_nav-item">
                <a
                  style="color:{{item.setting_json.color}};font-style:{{item.setting_json.style}};font-weight:{{item.setting_json.bold}};text-decoration:{{item.setting_json.decoration}};"
                  target="{{item.setting_json.open | default : '_self' }}"
                  {% if item.setting_json.model != 1 %}
                  rel="external nofollow"
                  {% endif %}
                  href="{{item.url_json.url | default:'javascript:void(0)' }}">
                  {% if item.src %}
                    <header-nav-img>{% include 'lazy_img', src: item.src, alt: '' %}{{ item.nav_item_name }}</header-nav-img>
                  {% else %}
                    {{ item.nav_item_name }}
                  {% endif %}
                </a>
                {% if item.children %}
                  <span class="animated-plus cursor-pointer"></span>
                {% endif %}

              </div>
              {% if item.children %}
                <ul class="child_mobile_nav">
                  {% for el in item.children %}
                    <li>
                      <div class="mobile_nav-item">
                        <a
                          style="color:{{el.setting_json.color}};font-style:{{el.setting_json.style}};font-weight:{{el.setting_json.bold}};text-decoration:{{el.setting_json.decoration}};"
                          target="{{el.setting_json.open | default : '_self' }}"
                          {% if el.setting_json.model != 1 %}
                          rel="external nofollow"
                          {% endif %}
                          href="{{el.url_json.url | default:'javascript:void(0)' }}">
                          {% if el.src %}
                            <header-nav-img>{% include 'lazy_img', src: el.src, alt: '' %}{{ el.nav_item_name }}</header-nav-img>
                          {% else %}
                            {{ el.nav_item_name }}
                          {% endif %}
                        </a>
                        {% if el.children %}
                          <span class="animated-plus cursor-pointer"></span>
                        {% endif %}
                      </div>
                      <ul class="child_mobile_nav">
                        {% for ddItem in el.children %}
                          <li style="padding:10px 16px">
                            <a
                              style="color:{{ddItem.setting_json.color}};font-style:{{ddItem.setting_json.style}};font-weight:{{ddItem.setting_json.bold}};text-decoration:{{ddItem.setting_json.decoration}};"
                              target="{{ddItem.setting_json.open | default : '_self' }}"
                              {% if ddItem.setting_json.model != 1 %}
                              rel="external nofollow"
                              {% endif %}
                              href="{{ddItem.url_json.url | default:'javascript:void(0)' }}">
                              {% if ddItem.src %}
                                <header-nav-img>{% include 'lazy_img', src: ddItem.src, alt: '' %}{{ ddItem.nav_item_name }}</header-nav-img>
                              {% else %}
                                {{ ddItem.nav_item_name }}
                              {% endif %}
                            </a>
                          </li>
                        {% endfor %}
                      </ul>
                    </li>
                  {% endfor %}
                </ul>
              {% endif %}
            </li>
          {% endfor %}
        {% else %}
          <li>
            <div class="mobile_nav-item">
              <a href="/">Home</a>
            </div>
          </li>
          <li class="mobile_nav-item">
            <a href="/collections">Collections</a>
          </li>
          <li class="mobile_nav-item">
            <a href="/search">Search</a>
          </li>
          <li class="mobile_nav-item">
            <a href="/collections/all">Product</a>
          </li>
        {% endif %}
        {% if data.is_member %}
          {% if customerInfo and customerInfo.email %}
            <li class="mobile_nav-item">
              <a href="/account">{{ lang.layout.customer.account }}</a>
            </li>
          {% else %}
            <li class="mobile_nav-item">
              <a href="/account/login" class="user_login">
                {% include 'svg', svg: 'user_icon' %}
                {{ lang.layout.customer.login }}
              </a>
            </li>
          {% endif %}
        {% endif %}
      </ul>
    </div>
  </div>
</div>

<script>
  (function() {
    $(".mobile_nav-item .animated-plus").click(function() {
      switchClass($(this).parent(), "open");
      $(this).parent().siblings(".child_mobile_nav").slideToggle(300);
    });

    $('#mobile_nav .close_box span').on('click', function(e) {
      $('#mobile_nav').removeClass('show')
      $('html').removeClass('html_scroll_none')
    });

    $('#mobile_nav').on('click', function() {
      $(this).removeClass('show')
      $('html').removeClass('html_scroll_none')
    });

    $('#mobile_nav .mobile_nav_content').on('click', function(e) {
      e.stopPropagation()
    })

  })()
</script>